<template>

  <duv class="qu">
    <el-button  class="nba" @click="dialogVisibles ">图片裁剪</el-button>
  <el-dialog v-model="dialogVisible" width="60%">
    <template #header>
      <div class="dialgo_title">图片裁剪</div>
    </template>
  
    <div class="cropper_box">
      <vue-cropper
        autoCrop
        :img="imgUrl"
        ref="cropper"
        centerBox
        :canMove="false"
        :canScale="false"
        :info="false"
        :enlarge="10"
        fixed
        :fixedNumber="fixedNumber"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <img class="cropper_url" :src="cropperUrl" alt="" />
  </duv>
  
  
</template>

<script setup>
import { ref } from "vue";
import { VueCropper } from "vue-cropper";
import  'vue';
import imgUrl from "@/assets/images/auto.png"; //引入的本地图片
// import imgUrl from '@/utils/data'

// let liner=[]
const dialogVisible = ref(false);
let cropper = ref(null);
let fixedNumber = ref([9, 16]);
let cropperUrl = ref(""); //截后的图
// 确定截图
let dialogVisibles=()=>{
  dialogVisible.value=true
}
function confirm() {
  cropper.value.startCrop();
  cropper.value.getCropData((data) => {
    console.log("这里的data是base64格式");
    dialogVisible.value = false;
    // cropperUrl.value = data;
    const image = new Image();
    image.src = data;
    image.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = 900;
      canvas.height = 1600;
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      const croppedImageSrc = canvas.toDataURL("image/png");
      cropperUrl.value = croppedImageSrc;
    };
  });
  // cropper.value.getCropBlob((data) => {
  //   console.log("这里的data是blob流格式");
  //   const image = new Image();
  //   image.src = URL.createObjectURL(data);
  //   image.onload = () => {
  //     const canvas = document.createElement("canvas");
  //     const ctx = canvas.getContext("2d");
  //     canvas.width = 900;
  //     canvas.height = 1600;
  //     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  //     const croppedImageSrc = canvas.toDataURL("image/png");
  //     cropperUrl.value = croppedImageSrc;
  //   };
  // });
}
</script>
<style lang="scss" scoped>
.dialgo_title {
  width: 100%;
  text-align: left;
  font-size: 18px;
  color: #333;
  font-family: SourceHanSansCN-Bold;
  font-weight: 700;
}
.cropper_box {
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
.cropper_url {
  width: 200px;
  height: auto;
}
</style>
<style>
.el-dialog__footer {
  width: 100%;
  text-align: center !important;
}
.nba{
  margin-top: -11%;
  border: 1px #ccc solid;
  font-size: 15px;

}
</style>

